<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
                    <el-form-item>
                            <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                                border>
                                查看已删门店
                            </el-checkbox>
                        </el-form-item>
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item class="pull-right">
                    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
                </el-form-item>
            </el-form>
            <el-table highlight-current-row show-summary :data="list" border size="small" id="exportContainer">
                <el-table-column align="center" prop="date" label="日期" sortable></el-table-column>
                <el-table-column align="center" prop="non_vip_tickets" label="非会员兑换票数（张）" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'非会员兑换票数（张）：临时卡兑换礼品所花费票数')"></el-table-column>
                <el-table-column align="center" prop="vip_tickets" label="会员兑换票数（张）" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'会员兑换票数（张）：会员卡、精英会员卡兑换礼品所花费票数')"></el-table-column>
                <el-table-column align="center" prop="all_tickets" label="总兑换票数（张）" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'总兑换（票）：非会员兑换（票）+会员兑换（票）')"></el-table-column>
                <el-table-column align="center" prop="non_vip_money" label="非会员兑换礼品成本价（元）" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'非会员兑换礼品成本价（元）：临时卡兑换的礼品的总成本价')"></el-table-column>
                <el-table-column align="center" prop="vip_money" label="会员兑换礼品成本价（元）" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'会员兑换礼品成本价（元）：会员卡和精英会员卡兑换的礼品的总成本价')">
                </el-table-column>
                <el-table-column align="center" prop="all_money" label="总兑换礼品成本价（元）" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'总兑换礼品成本价（元）：非会员兑换礼品成本价（元）+会员兑换礼品成本价（元）')">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getStoreList,
    } from "@/api/storage_control/giftChangeAll_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime, renderHeader } from '@/utils';
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    export default {
        data() {
            return {
                renderHeader,
                listLoading: false,
                is_print: false,
                storeList: null,
                brandList: [],
                areaList: [],
                formInline: {
                    store_id: '',
                    begin_time: '',
                    end_time: '',
                    look_del: '0'
                },
                list: [],
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            // 前端导出
            exportExcel() {
                /* generate workbook object from table */
                var wb = XLSX.utils.table_to_book(document.querySelector('#exportContainer'))
                /* get binary string as output */
                var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${this.$route.meta.title}.xlsx`)
                } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
                return wbout
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 321 }).then(response => {
                    this.storeList = response;
                     let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id
                        } else {
                            this.formInline.store_id = ''
                        }
                    }
                    if (this.list == null) {
                        this.searchClick();
                    }
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    response.forEach(val => {
                        val.non_vip_money = (val.non_vip_money / 1000000).toFixed(2) * 1;
                        val.vip_money = (val.vip_money / 1000000).toFixed(2) * 1;
                        val.all_money = (val.non_vip_money * 1 + val.vip_money * 1).toFixed(2) * 1;
                        val.all_tickets = val.vip_tickets * 1 + val.non_vip_tickets * 1;
                    });
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>